<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="app">
            <div class="box" @click="boxClick">
                <!-- 阻止冒泡事件 -->
                <button @click.stop="btnClick">点我</button>
            </div>
            <form action="http://www.baidu.com">
                <!-- 阻止默认事件 -->
                <input type="submit" value="提交" @click.prevent="formSubmit">
            </form>
            <a href="http://www.baidu.com" @click.prevent="aClick">百度</a>

            <!-- 响应一次事件 -->
            <button @click.once="btnClick">    点我</button>

            <input type="text" @keyup.y="getMsg">
            <input type="text" @keyup.enter="getMsg">


        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    msg: ""
                }
            },
            methods: {
                btnClick(){
                    console.log("点击事件")
                },
                boxClick(){
                    console.log("点击盒子")
                },
                formSubmit(){
                    console.log("提交按钮")
                },
                aClick(){
                    console.log("a点击")
                },
                getMsg(event){
                    console.log(event);
                }
            },
        }).mount("#app");
    </script>
</body>
</html>